<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="css/app.css" />

		<style type="text/css">
			.mui-content>.mui-card:first-child {
				margin-top: 6px;
			}
			
			.mui-row .hmx-test-xs {
				padding-left: 56px;
			}
			
			.mui-card {
				margin-left: 4px;
				margin-right: 4px;
			}
			
			.vipitem-active {
				color: #EB6100;
				border: 2px solid #EB6100;
			}
			
			.vipitem-active:after {
				border-bottom: 8px solid #EB6100;
				border-left: 8px solid transparent;
				content: " ";
				position: absolute;
				right: 4px;
			}
			
			.hmx-text-with-bottom {
				margin: 8px
			}
		</style>
	</head>

	<body>
		<div class="mui-content">

			<!--<div>
				<span class="hmx-text-with-bottom">
					续费
				</span>
			</div>-->

			<div id="vipList">
				<div class="mui-card vipitem-active">
					<div class="mui-row hmx-text-md">
						<div class="mui-col-xs-4 mui-text-center" style="border-right: 1px solid lightgray;">
							1个月
						</div>
						<div class="mui-col-xs-8 mui-text-center">
							￥10元
						</div>
					</div>
				</div>

			</div>

			<!--<div class="mui-card">-->
			<!--<div class="mui-row hmx-text-md" style="padding: 12px ;">
				<span style="font-size: 80%;color: darkgray;">应付金额：</span>
				<span class="hmx-text-orange">
						￥
					</span>
				<span id="unitPrice" class="hmx-text-orange">
						0.00
					</span>
				<span class="hmx-text-orange">
						元
					</span>
				</div>
			</div>-->

			<button id="btnPay" type="button" class="mui-btn mui-btn-block hmx-btn-orange hmx-btn-lg" style="margin: 60px 12px 0 12px;width: -webkit-calc(100% - 24px);letter-spacing: 0;">微信支付</button>
		</div>
		<script src='js/jquery-2.1.4.min.js'></script>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			$(function() {
				initUI();
				$.ajax({
					type: "get",
					url: $.getContextPath() + "/weixin/wxpay/getWeixinConfig",
					async: true,
					success: function(r) {
						//						alert(JSON.stringify(r));
						wx.config({
							debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: r.appId, // 必填，公众号的唯一标识
							timestamp: r.timestamp, // 必填，生成签名的时间戳
							nonceStr: r.nonceStr, // 必填，生成签名的随机串
							signature: r.signature, // 必填，签名，见附录1
							jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
						});
						// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
					},
					error: function(a, b, c) {
						console.log(a.status);
						console.log(c.readyState);
						console.log(b);
						alert(a.status + " " + b + " " + c.readyState);
					}
				});
			});

			wx.ready(function() {
				//				$.ajax({
				//					type: "get",
				//					url: $.getContextPath() + "/weixin/wxpay/getJSSDKPayInfo",
				//					async: true,
				//					data: {
				//						//						openid: 'oWLepv2wvJsurFt5_dnGbmeq95Y8',
				//						//						total_fee: 1,
				//						specialId: row['specialId'],
				//					},
				//					success: function(r) {
				//						//						alert(row['specialId']+"^^^^^^^^^");
				//						//						alert(JSON.stringify(r));
				//						if(r.result == true) {
				//							alert('wx.chooseWXPay start');
				//							wx.chooseWXPay({
				//								//									appId: payConfigObject.Client_appId,
				//								timestamp: r.datum.timeStamp,
				//								nonceStr: r.datum.nonceStr,
				//								package: r.datum.package,
				//								signType: r.datum.signType,
				//								paySign: r.datum.paySign,
				//								success: function(res) {
				//									alert('订阅成功！');
				//									//									window.history.go(1 - window.history.length);
				//									window.history.go(-2);
				//								},
				//								cancel: function(res) {
				//									alert(JSON.stringify(res));
				//								}
				//							});
				//							//							alert('wx.chooseWXPay end');
				//						} else {
				//							alert('请稍后再试~');
				//						}
				//
				//					},
				//					error: function(a, b, c) {
				//						console.log(a.status);
				//						console.log(c.readyState);
				//						console.log(b);
				//						alert(a.status + " " + b + " " + c.readyState);
				//					}
				//				});

			});

			function initUI() {
				$('#vipList').on('click', '.mui-card', function() {
					$(this).addClass('vipitem-active').siblings().removeClass('vipitem-active');
				});
				getList();
				$('#btnPay').click(function() {
					var m = getSelected();
					if(m) {
						alert(m);
						//调起支付
						$.ajax({
							type: "get",
							url: $.getContextPath() + "/weixin/wxpay/getVipJSSDKPayInfo",
							async: true,
							data: {
								id: m
							},
							success: function(r) {
								if(r.result == true) {
//									alert('wx.chooseWXPay start');
									wx.chooseWXPay({
										//									appId: payConfigObject.Client_appId,
										timestamp: r.datum.timeStamp,
										nonceStr: r.datum.nonceStr,
										package: r.datum.package,
										signType: r.datum.signType,
										paySign: r.datum.paySign,
										success: function(res) {
											alert('订阅成功！');
											//									window.history.go(1 - window.history.length);
											window.history.go(-2);
										},
										cancel: function(res) {
											alert(JSON.stringify(res));
										}
									});
									//							alert('wx.chooseWXPay end');
								} else {
									alert('请稍后再试~');
								}

							},
							error: function(a, b, c) {
								console.log(a.status);
								console.log(c.readyState);
								console.log(b);
								alert(a.status + " " + b + " " + c.readyState);
							}
						});
					}
				});
			};

			function getList() {
				$('#vipList').UIListView({
					//					dataUrl 'http://jwangkun.vicp.net/jywhweixin/weixin/front_index/latest',
					dataUrl: "data/front_vip/list.json",
					itemTplUrl: "tpl/vipListItem.tpl"
				});
			};

			function getSelected() {
//				var s = $(".vipitem-active").find('.mui-col-xs-8').html();
//				if(s) {
//					s = s.replace('￥', '').replace('元', '');
//					return s;
//				} else {
//					return undefined;
//				}
//				
				return $(".vipitem-active").attr('id');
			}
		</script>
	</body>

</html>